<script lang="ts" setup>
  import { get, post, Message, loadFile } from '@/utils';
  import { LineSeriesOption } from 'echarts';
  import { ToolTipFormatterParams } from '@/types/echarts';
  import useThemes from '@/hooks/themes';
  const props = defineProps<{
    lineColor: string;
    areaColor: string;
    titles: string[];
    data: number[];
    title: string;
    loading: boolean;
  }>();
  const { isDark } = useThemes();
  watch(
    () => props.data,
    (n) => {
      console.log(props);

      if (n.length) {
        Object.assign(chartOption, {
          title: {
            text: props.title,
          },
          grid: {
            left: '10%',
            right: '10%',
            top: '10%',
            bottom: '40',
          },
          xAxis: {
            type: 'category',
            offset: 2,
            data: props.titles,
            boundaryGap: false,
            axisLabel: {
              color: '#4E5969',
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisPointer: {
              show: true,
              lineStyle: {
                color: '#23ADFF',
                width: 1,
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: isDark.value ? '#2E2E30' : '#F2F3F5',
              },
            },
          },
          tooltip: {
            trigger: 'axis',
            formatter(params) {
              const [firstElement] = params as ToolTipFormatterParams[];
              return `<div>
              <p class="tooltip-title">${firstElement.axisValueLabel}</p>
              ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
            </div>`;
            },
            className: 'echarts-tooltip-diy',
          },

          series: [
            generateSeries(
              props.title,
              props.lineColor,
              props.areaColor,
              props.data
            ),
          ],
        });
      }
    }
  );
  /**图表数据 */
  const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
    return items
      .map(
        (el) => `<div class="content-panel">
          <p>
            <span style="background-color: ${
              el.color
            }" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
          </p>
          <span class="tooltip-value">${el.value.toLocaleString()}</span>
        </div>`
      )
      .reverse()
      .join('');
  };
  const generateSeries = (
    name: string,
    lineColor: string,
    itemBorderColor: string,
    data: number[]
  ): LineSeriesOption => {
    return {
      name,
      data,
      stack: 'Total',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: {
        color: lineColor,
      },
      emphasis: {
        focus: 'series',
        itemStyle: {
          color: lineColor,
          borderWidth: 2,
          borderColor: itemBorderColor,
        },
      },
      lineStyle: {
        width: 2,
        color: lineColor,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.1,
        color: lineColor,
      },
    };
  };
  const chartOption = reactive({
    title: {
      text: props.title,
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '10%',
      bottom: '40',
    },
    xAxis: {
      type: 'category',
      offset: 2,
      data: props.titles,
      boundaryGap: false,
      axisLabel: {
        color: '#4E5969',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisPointer: {
        show: true,
        lineStyle: {
          color: '#23ADFF',
          width: 1,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: isDark.value ? '#2E2E30' : '#F2F3F5',
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        const [firstElement] = params as ToolTipFormatterParams[];
        return `<div>
              <p class="tooltip-title">${firstElement.axisValueLabel}</p>
              ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
            </div>`;
      },
      className: 'echarts-tooltip-diy',
    },

    series: [],
  } as any);
</script>
<template>
  <a-spin :loading="props.loading" style="width: 100%; height: 100%">
    <Chart :option="chartOption" />
  </a-spin>
</template>
<style lang="less" scoped></style>
